<template>
	<view class="content">
		<view class="front">
			<view class="member">
			<view class="img-box">
				<image
						class="image"
						v-if="stepUserInfo && stepUserInfo.headUrl"
						:src="stepUserInfo.headUrl"
				/>
				<image class="image" v-else src="@/static/images/default-avatar.png" />
			</view>
			<view class="right">
				<view class="user-name" @tap="login">{{ token ? stepUserInfo.nickName : '立即登录' }}</view>
				<view class="balance">
					<image class="image" src="https://onecode-zfx-one.oss-cn-shenzhen.aliyuncs.com/20200910/2e767550-f306-11ea-bc7d-134589f3ede3.png"></image>
					<text class="text">{{ parseInt(stepUserInfo.balance) || 0 }}</text>
				</view>
			</view>
		</view>
		<view class="record-list">
			<view class="record-item" @tap="toPath('/pages/draw/record')">
				<image class="image draw" src="@/static/images/icon/draw.png"></image>
				<text class="text">全部抽奖</text>
			</view>
			<view class="record-item" @tap="toPath('/pages/sign/record')">
				<image class="image sign" src="@/static/images/icon/sign.png"></image>
				<text class="text">全部打卡</text>
			</view>
			<view class="record-item" @tap="toPath('/pages/cash/record')">
				<image class="image cash" src="@/static/images/icon/cash.png"></image>
				<text class="text">账户明细</text>
			</view>
		</view>
		</view>

		<!-- #ifdef MP-ALIPAY -->
		<guess :loadMoreTime="loadMoreTime" :pluginOptions="pluginOptions"></guess>
		<!-- #endif -->

		<!-- 授权登录 -->
		<authorize ref="authorize" @authorizeSuccess="refresh()"></authorize>
		
		<view class="contact" @tap="clickService()">
			<contact-button size="70rpx" color="#fff" icon="https://onecode-zfx-one.oss-cn-shenzhen.aliyuncs.com/20201217/34e8d1d0-4040-11eb-89f4-bb2fbdf0c7f5.png" tnt-inst-id="Dyp_KWXa" scene="SCE00800516" />
		</view>
	</view>
</template>

<script>
	import { mapGetters } from 'vuex';
	import Authorize from '@/components/Authorize';

	export default {
		name: 'index',
		components: {
			Authorize,
		},
		data() {
			return {
				token: null,
				pluginOptions: {
					pid: 'mm_99209738_956900411_110861050012', // 当前插件的淘客 pid 注意pid前后一定不能随意加空格！！！
					pageSize: 6, // 每页个数，默认 10
					maxPageNum: 10, // 最大页数，不设置时请求接口所有数据
				},
				loadMoreTime: 0
			}
		},
		onLoad() {
			uni.reportAnalytics('enter_wode');
		},
		onShow() {
			if (uni.getStorageSync('stepToken')) {
				this.$store.dispatch('getStepUserInfo');
				this.token = uni.getStorageSync('stepToken');
			} else {
				this.token = null;
			}
			this.$store.dispatch('addVisitRecordUnAuthorized', { pageType : 6 });
		},
		computed: {
			...mapGetters(['stepUserInfo'])
		},
		methods: {
			refresh() {
				if (uni.getStorageSync('stepToken')) {
					this.token = uni.getStorageSync('stepToken');
				} else {
					this.token = null;
				}
			},
			login() {
				if (!uni.getStorageSync('stepToken')) {
					this.$refs.authorize.open();
					return false;
				}
			},
			// 去兑换记录页
			toPath(url) {
				if (!uni.getStorageSync('stepToken')) {
					this.$refs.authorize.open();
					return false;
				}
				uni.navigateTo({
				    url: url
				});

				if (url === '/pages/draw/record') {
					uni.reportAnalytics('click_quanbucj', {
						click_quanbucj: 1
					});
				}
				if (url === '/pages/sign/record') {
					uni.reportAnalytics('click_quanbudk', {
						click_quanbudk: 1
					});
				}
				if (url === '/pages/cash/record') {
					uni.reportAnalytics('click_zhanghumx', {
						click_zhanghumx: 1
					});
				}
			},
			clickService() {
				uni.reportAnalytics('click_kefu', {
					click_kefu: 1
				});
			}
		},
		onReachBottom() {
			this.loadMoreTime = (this.loadMoreTime || 0) + 1;
		},
		onPullDownRefresh() {
		    this.refresh();
		},
	}
</script>

<style lang="scss" scoped>
	.content {
		min-height: 100vh;
		.front {
			background: linear-gradient(to bottom, #E1EBFF, #f5f5f5);
		}
		.member {
			padding: 44rpx;
			@include flexBox(flex-start, center);
			.img-box {
				width: 124rpx;
				height: 124rpx;
				border-radius: 50%;
				overflow: hidden;
				margin-right: 36rpx;
				.image {
					width: 100%;
					height: 100%;
				}
			}
			.right {
				.user-name {
					color: #333333;
					font-size: 36rpx;
				}
				.balance {
					margin-top: 16rpx;
					@include flexBox(flex-start, center);
					.image {
						width: 54rpx;
						height: 54rpx;
					}
					.text {
						font-size: 36rpx;
						color: #4BA1FE;
						margin-left: 16rpx;
					}
				}
			}
		}
		.record-list {
			width: 100%;
			margin-top: 26rpx;
			padding-bottom: 46rpx;
			@include flexBox(space-around, center);
			.record-item {
				height: 124rpx;
				@include flexBox(space-between, center, column);
				.image {
					width: 64rpx;
				}
				.draw {
					height: 64rpx;
				}
				.sign {
					height: 60rpx;
				}
				.cash {
					height: 57rpx;
				}
				.text {
					color: #373737;
					font-size: 28rpx;
				}
			}
		}
	}
	.contact {
		position: fixed;
		right: 20rpx;
		top: 70vh;
		padding: 10rpx;
		background: rgba(255, 255, 255, 0.9);
		width: 76rpx;
		height: 76rpx;
		border-radius: 50rpx;
		box-shadow: 0px 0px 20rpx rgba(99, 99, 99, 0.28);
		@include flexBox(center, center);
	}
</style>
